import $ from 'jquery';

import '../scss/common.css'
import '../scss/iconfont.css'

import header from '../components/header';
import footer from '../components/footer'
import indexTitle from '../components/indexTitle'
import listNav from '../components/listNav'
import courseList from '../components/courseList'
import noDataTip from '../components/noDataTip'

import CourseTab from '../modules/CourseTab.js'

import IndexModel from '../models/index';   

import { getUrlQueryValue } from '../utils/tools'

import { filterCourseData } from '../lib/course'

 ;(async ($) => {

    const $app = $('#app'),
          $container = $('<div class="container"></div>');

    //获取浏览器url携带的参数，
    const queryField = getUrlQueryValue('field') || 'all';

    const indexModel = new IndexModel(),
          retFieldData = await indexModel.getCourseFields(),
          retCourseData = await indexModel.getCourses(queryField),
          fields = retFieldData.result,
          courses = retCourseData.result;

    console.log(fields, courses);

    const headerComponent = header(fields),
          indexTitleComponent = indexTitle(),
          listNavComponent = listNav(fields, queryField),
          courseListComponent = courseList(),
          footerComponent = footer(),
          noDataTipComponent = noDataTip();

    const init = () => {
        render();
        loadModules();
    }

    function render() {

        $container.append(headerComponent.tpl());

        $container.append(indexTitleComponent.tpl('全部课程', false));

        $container.append(listNavComponent.tpl());

        $container.append(courses.length > 0 
                                    ? 
                                    courseListComponent.tpl(filterCourseData(courses, queryField)) 
                                    : 
                                    noDataTipComponent.tpl());

        $container.append(footerComponent.tpl());

        $app.append($container);
    }
    
    function loadModules () {
          new CourseTab().init();
    }

    init();
})($)